﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>首页</title>
  </head>

  <body>
    <!-- Start Top Stats -->
    <div class="col-md-12">
      <ul class="topstats clearfix">
        <li class="arrow"></li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-dot-circle-o"></i> Today Profit</span>
          <h3>$36.45</h3>
          <span class="diff"><b class="color-down"><i class="fa fa-caret-down"></i> 26%</b> from yesterday</span>
        </li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-calendar-o"></i> This Week</span>
          <h3>$96.25</h3>
          <span class="diff"><b class="color-up"><i class="fa fa-caret-up"></i> 26%</b> from last week</span>
        </li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-shopping-cart"></i> Total Sales</span>
          <h3 class="color-up">696</h3>
          <span class="diff"><b class="color-up"><i class="fa fa-caret-up"></i> 26%</b> from last month</span>
        </li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-users"></i> Visitors</span>
          <h3>960</h3>
          <span class="diff"><b class="color-down"><i class="fa fa-caret-down"></i> 26%</b> from yesterday</span>
        </li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-eye"></i> Page View</span>
          <h3 class="color-up">46.230</h3>
          <span class="diff"><b class="color-down"><i class="fa fa-caret-down"></i> 26%</b> from yesterday</span>
        </li>
        <li class="col-xs-6 col-lg-2">
          <span class="title"><i class="fa fa-clock-o"></i> Avarage Time</span>
          <h3 class="color-down">2:10<small>min</small></h3>
          <span class="diff"><b class="color-up"><i class="fa fa-caret-up"></i> 26%</b> from last week</span>
        </li>
      </ul>
    </div>
    <!-- End Top Stats -->

    <div class="row">

      <div class="col-md-12">
        <div class="panel panel-default">

          <div class="panel-title">
            Rickshaw
          </div>

          <div class="panel-body">
            <h4>Rickshaw is a JavaScript toolkit for creating interactive time series graphs.</h4>
            <p>Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together</p>
            <p><b>Rickshaw:</b> A JavaScript toolkit for creating interactive time-series graphs<p>
            <a href="http://code.shutterstock.com/rickshaw/" target="_blank" class="btn btn-sm">Official documentation</a>
          </div>

        </div>
      </div>

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Lines and Toggling
          </div>
          <div class="panel-body">

            <div id="rickshaw-lines"></div>

          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Bars
          </div>
          <div class="panel-body">
            <div id="rickshaw-bars"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Fixed
          </div>
          <div class="panel-body">
            <div id="rickshaw-fixed"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Scaled
          </div>
          <div class="panel-body">
            <div id="rickshaw-scaled"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->


      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Time Scale
          </div>
          <div class="panel-body">
            <div id="rickshaw-timescale"></div>
            <div id="slider"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->


      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Gaps
          </div>
          <div class="panel-body">
            <div id="rickshaw-gaps"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->




    </div>
    <!-- End Flot Chart -->


    <!-- Start Chartist -->
    <div class="row">

      <div class="col-md-12">
        <div class="panel panel-default">

          <div class="panel-title">
            CHARTIST
          </div>

          <div class="panel-body">
            <h4>Chartist - Simple Responsive Charts</h4>
            <p>You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.</p>
            <p><b>Chartist:</b> Simple Responsive Charts<p>
            <a href="http://gionkunz.github.io/chartist-js/index.html" target="_blank" class="btn btn-sm">Official documentation</a>
          </div>

        </div>
      </div>

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Simple Line Chart
          </div>
          <div class="panel-body">
            <div id="chartist-line" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Line Scatter Diagram
          </div>
          <div class="panel-body">
            <div id="chartist-line-scatter" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Line Chart with Area
          </div>
          <div class="panel-body">
            <div id="chartist-line-area" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Bi-polar
          </div>
          <div class="panel-body">
            <div id="chartist-line-bipolar" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Overlapping Bars
          </div>
          <div class="panel-body">
            <div id="chartist-bar-overlap" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Horizontal Bar
          </div>
          <div class="panel-body">
            <div id="chartist-horizontal-bar" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Simple Pie Chart
          </div>
          <div class="panel-body">
            <div id="chartist-pie" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-lg-4 col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Gauge Chart
          </div>
          <div class="panel-body">
            <div id="chartist-gauge" class="ct-chart ct-perfect-fourth"></div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

    </div>
    <!-- End Chartist -->


    <!-- Start Flot Chart -->
    <div class="row">

      <div class="col-md-12">
        <div class="panel panel-default">

          <div class="panel-title">
            FLOT CHARTS
          </div>

          <div class="panel-body">
            <h4>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</h4>
            <p>Here are some examples for Flot, the Javascript charting library for jQuery:</p>
            <p><b>Flot:</b> Attractive JavaScript plotting for jQuery<p>
            <a href="http://www.flotcharts.org/" target="_blank" class="btn btn-sm">Official documentation</a>
          </div>

        </div>
      </div>

      <!-- Start Chart -->
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Real-time Chart
          </div>
          <div class="panel-body">
            <div class="flotchart-container">
              <div id="realtime" class="flotchart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Setting various options
          </div>
          <div class="panel-body">
            <div class="flotchart-container">
              <div id="setting-various-options" class="flotchart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Multiple axes
          </div>
          <div class="panel-body">
            <div class="flotchart-container">
              <div id="multiple" class="flotchart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

      <!-- Start Chart -->
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-title">
            Stacking Bars
          </div>
          <div class="panel-body">
            <div class="flotchart-container">
              <div id="stacked" class="flotchart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Chart -->

    </div>
    <!-- End Flot Chart -->





    <!-- Start Row -->
    <div class="row">

      <div class="col-md-12">
        <div class="panel panel-default panel">

          <div class="panel-title">Easy Pie Chart</div>

          <div class="panel-body">

            <div class="row margin-0">
              <div class="col-md-12">
                <h4>Easy Pie Chart</h4>
                <p>Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.</p>
                <p><b>Easy Pie Chart</b> by rendro</p>
                <a href="http://rendro.github.io/easy-pie-chart/" target="_blank" class="btn btn-sm">Official documentation</a>
              </div>
            </div>

            <hr>

            <div class="row margin-0">

              <!-- Start Easypie -->
              <div class="col-md-6">
                <h4>Basic</h4>
                <div class="easypie" data-percent="86"><span>90</span>Orders</div>
                <div class="easypie" data-percent="11"><span>29</span>Products</div>
                <div class="easypie" data-percent="50"><span>912</span>Comments</div>
              </div>
              <!-- End Easypie -->


            </div>


          </div>
        </div>
      </div>
    </div>
    <!-- End Row -->





    <!-- Start Row -->
    <div class="row">

      <div class="col-md-12">
        <div class="panel panel-default panel">

          <div class="panel-title">Sparklines</div>

          <div class="panel-body">

            <div class="row margin-0">
              <div class="col-md-12">
                <h4>Tiny but Amazing</h4>
                <p>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.</p>
                <p><b>jQuery Sparklines</b></p>
                <a href="http://omnipotent.net/jquery.sparkline/#s-about" target="_blank" class="btn btn-sm">Official documentation</a>
              </div>
            </div>

            <hr>

            <div class="row margin-0">

              <div class="col-md-4">
                <h4>Line</h4>
                <span class="sparkline-line"></span>
              </div>

              <div class="col-md-4">
                <h4>Bar</h4>
                <span class="sparkline-bar"></span>
              </div>

              <div class="col-md-4">
                <h4>Pie</h4>
                <span class="sparkline-pie"></span>
              </div>

            </div>


          </div>
        </div>
      </div>
    </div>
    <!-- End Row -->

    <!-- ================================================
      Flot Chart
      ================================================ -->
    <!-- main file -->
    <script type="text/javascript" src="/js/flot-chart/flot-chart.js"></script>
    <!-- time.js -->
    <script type="text/javascript" src="/js/flot-chart/flot-chart-time.js"></script>
    <!-- stack.js -->
    <script type="text/javascript" src="/js/flot-chart/flot-chart-stack.js"></script>
    <!-- pie.js -->
    <script type="text/javascript" src="/js/flot-chart/flot-chart-pie.js"></script>
    <!-- demo codes -->
    <script type="text/javascript" src="/js/flot-chart/flot-chart-plugin.js"></script>

    <!-- ================================================
    Chartist
    ================================================ -->
    <!-- main file -->
    <script type="text/javascript" src="/js/chartist/chartist.js"></script>
    <!-- demo codes -->
    <script type="text/javascript" src="/js/chartist/chartist-plugin.js"></script>

    <!-- ================================================
    Easy Pie Chart
    ================================================ -->
    <!-- main file -->
    <script type="text/javascript" src="/js/easypiechart/easypiechart.js"></script>
    <!-- demo codes -->
    <script type="text/javascript" src="/js/easypiechart/easypiechart-plugin.js"></script>

    <!-- ================================================
    Sparkline
    ================================================ -->
    <!-- main file -->
    <script type="text/javascript" src="/js/sparkline/sparkline.js"></script>
    <!-- demo codes -->
    <script type="text/javascript" src="/js/sparkline/sparkline-plugin.js"></script>

    <!-- ================================================
    Rickshaw
    ================================================ -->
    <!-- d3 -->
    <script src="/js/rickshaw/d3.v3.js"></script>
    <!-- main file -->
    <script src="/js/rickshaw/rickshaw.js"></script>
    <!-- demo codes -->
    <script src="/js/rickshaw/rickshaw-plugin.js"></script>
  </body>
</html>